﻿@{
    Layout = null;
}
@model Freshbox2._0.MODEL.manager

<!DOCTYPE html>

<html>
<head>
    <link rel="shortcut icon" href="favicon.ico">
    <link rel="icon" type="image/gif" href="~/img/animated_favicon1.gif">
    <meta name="viewport" content="width=device-width" />
    <link href="~/UILibs/easyui/themes/default/easyui.css" rel="stylesheet" />
    <link href="~/UILibs/easyui/themes/icon.css" rel="stylesheet" />
    <link href="~/Css/css.css" rel="stylesheet" />

    <script src="~/Scripts/jquery-1.7.1.min.js"></script>
    <script src="~/UILibs/easyui/jquery.easyui.min.js"></script>
    <script src="~/UILibs/easyui/locale/easyui-lang-zh_CN.js"></script>

    <script src="~/Scripts/jquery.unobtrusive-ajax.min.js"></script>
    <script src="~/Scripts/jquery.validate.min.js"></script>
    <script src="~/Scripts/jquery.validate.unobtrusive.min.js"></script>
    <script src="~/Scripts/datagrid-detailview.js"></script>
    <title></title>
    <script type="text/javascript">

     
        $(function () {
            $("#data").datagrid({
                fit: true,
                title: '理货员信息列表',
                striped: true,  
                rownumbers: true,
                columns:
                    [[
                    {
                        field: 'userid',
                        title: '编号',
                        width: 150,
                        height: 50,
                        halign: 'center',
                        sortable: true,
                        align: 'center'
                    }, {
                        field: 'username',
                        title: '用户名',
                        width: 150,
                        height: 50,
                        halign: 'center',
                        align: 'center',


                    }, {
                        field: 'password', // userid   username   userPhone   RealName  password   state
                        title: '密码',
                        width: 300,
                        height: 50,
                        halign: 'center',   
                        align: 'center'
                    }, {
                        field: 'RealName',
                        title: '真实姓名',
                        width: 150,
                        height: 50,
                        halign: 'center',
                        align: 'center'
                    }, {
                        field: 'userPhone',
                        title: '手机号码',
                        width: 200,
                        height: 50,
                        halign: 'center',
                        align: 'center'
                    }, {
                        field: 'state',
                        title: '状态',
                        width: 100,
                        height: 50,
                        halign: 'center',
                        align: 'center'
                    }]],
                url: pageConfig.getAction,
                pagination: true,
                pageSize: 10,
                pageList: [10, 15, 20, 25],
                sortName: 'userid',
                sortOrder: 'desc',
                toolbar: '#tool'
            });


            //$('#data').datagrid({
            //    view: detailview,
            //    detailFormatter: function (index, row) {
            //        return '<div style="padding:12px"><table class="ddv"></table></div>';
            //    },
            //    onExpandRow: function (index, row) {
            //        var ddv = $(this).datagrid('getRowDetail', index).find('table.ddv');
            //        ddv.datagrid({
            //            url: '/Manager/GetStoresByID',
            //            fitColumns: true,
            //            singleSelect: true,
            //            rownumbers: true,
            //            loadMsg: '',
            //            height: 'auto',
            //            columns: [[
            //                     {
            //                         field: 'storeid',   //storeid    storeName    storeDress
            //                         title: '店铺编号',
            //                         width: 100,
            //                         height: 50,
            //                         halign: 'center',
            //                         sortable: true,
            //                         align: 'center'
            //                     }, {
            //                         field: 'storeName',
            //                         title: '店铺名称',
            //                         width: 200,
            //                         height: 50,
            //                         halign: 'center',
            //                         align: 'center',

            //                     }, {
            //                         field: 'storeDress',
            //                         title: '店铺地址',
            //                         width: 250,
            //                         height: 50,
            //                         halign: 'center',
            //                         align: 'center'
            //                     }, {
            //                         field: 'property',
            //                         title: '店铺属性',
            //                         width: 150,
            //                         height: 50,
            //                         halign: 'center',
            //                         align: 'center',
            //                     },

            //            ]],
            //            onResize: function () {
            //                $('#data').datagrid('fixDetailRowHeight', index);
            //            },
            //            queryParams: {
            //                userid: row.userid,
            //            }
            //        });
            //        $('#data').datagrid('fixDetailRowHeight', index);
            //    }
            //});



            $("#formdialog").dialog({
                width: 400,
                height: 300,
                closed: true,
                modal: true,
                buttons: '#btns'
            });

        });

        var pageConfig = {
            type: null,
            storeIDs:null,
            getIDsAction: '@Url.Action("GetIDs")',
            getAction: '@Url.Action("Get")',
            saveAction: '@Url.Action("Save2")',
            delAction: '@Url.Action("ModifyState")',
            modifyAction: '@Url.Action("Modify2")',
            getOneAction: '@Url.Action("GetOnlyOne")',
        };
        ///禁用用户   状态改变
        function del() {

            var rows = $("#data").datagrid("getSelections")
            if (rows.length <= 0) {
                $.messager.alert("禁用用户", "没有选中的行", "info");
                return;
            }

            $.messager.confirm("确定操作", "您确定要禁用该用户吗？", function (flag) {
                if (flag) {
                    var idsStr = rows[0].userid;
                    $.ajax({
                        url: pageConfig.delAction,
                        data: { id: idsStr },
                        dataType: "json",
                        type: "POST",
                        beforeSend: function () {
                            before();
                        },
                        success: function (data) {
                            success(data);
                        },
                        error: function () {
                            error();
                        },
                        complete: function () {
                            complete();
                        }
                    });
                }
            })
        }


        //弹出框
        function alertFormDialog(type) {
          
            $('#store').combobox({
                valueField: "shopID", //Value字段 
                textField: "shopName", //Text字段 
                multiple: true,            
                url: "/Manager/GetShop", //数据源 

                //onChange: function() {
                //    var value = $('#store').combobox('getValues');
                //               console.log(value);
                //               console.log(value.splice(','));
                //             alert(value);
                //          },
                formatter: function (row) { //formatter方法就是实现了在每个下拉选项前面增加checkbox框的方法  
                    var opts = $(this).combobox('options');
                    return '<input type="checkbox" class="combobox-checkbox">' + row[opts.textField]
                },
                onLoadSuccess: function () {  //下拉框数据加载成功调用  
                    $('#store').combobox('clear');
                    var opts = $(this).combobox('options');
                    var target = this;
                    var values = $(target).combobox('getValues');//获取选中的值的values  
                    $.map(values, function (value) {
                        var el = opts.finder.getEl(target, value);
                        el.find('input.combobox-checkbox')._propAttr('checked', true);
                    })
                },
                onSelect: function (row) { //选中一个选项时调用  
                    $('#store').combobox('clear');
                    var opts = $(this).combobox('options');
                    //获取选中的值的values  
                    $("#store").val($(this).combobox('getValues'));

                    //设置选中值所对应的复选框为选中状态  
                    var el = opts.finder.getEl(this, row[opts.valueField]);
                    el.find('input.combobox-checkbox')._propAttr('checked', true);
                },
                onUnselect: function (row) {//不选中一个选项时调用  
                    var opts = $(this).combobox('options');
                    //获取选中的值的values  
                    $("#store").val($(this).combobox('getValues'));

                    var el = opts.finder.getEl(this, row[opts.valueField]);
                    el.find('input.combobox-checkbox')._propAttr('checked', false);
                }
            })

            pageConfig.type = type;

            $("#formdialog form").form("reset");
            if (type == 1) {

                $("#formdialog").dialog("open");
                $("#formdialog").dialog("setTitle", "添加");
                $("#formdialog form").attr("action", pageConfig.saveAction);

            }
            else {
                var rows = $("#data").datagrid("getSelections");

                if (rows.length != 1) {
                    $.messager.alert("提示", "修改时必须且只能选中一条记录！", "info");
                }
                if (rows[0].state == 1) {
                    $.messager.alert("提示", "此用户已经被禁用！不能进行修改", "info");
                }
                else {

                    $("#formdialog").dialog("open");
                    $("#formdialog").dialog("setTitle", "修改");
                    // $('#username').attr("disabled", true);//不可编辑

                    $.ajax({
                        async: false,
                        url: pageConfig.getOneAction + "?id=" + rows[0].userid,
                        dataType: "json",
                        type: "POST",
                        success: function (data) {    //   userid   username   userPhone   RealName  password   state
                            $("#userid").val(data.userid);
                            $("#username").val(data.username);
                            $("#userPassword").val(data.password);
                            $("#userPhone").val(data.userPhone);
                            $("#userRealName").val(data.RealName);

                        }
                    });
                }
            }
        }

        function closeDptDialog() {
            $("#formdialog").dialog("close")
        }

        function checkMobile(str) {
            var re = /^1\d{10}$/;           
            if (re.test(str)) {
                return true;
            } else {              
                $.messager.alert("提示", "手机号码格式错误", "info");
                return false;
            }
        }
        //点击保存按钮 
        function save() {
            //alert(checkMobile($("#userPhone").val()));  true   false 
            //pageConfig.storeIDs = $('#store').combobox('getValues');//获取的是Id   
            if (checkMobile($("#userPhone").val())) {
                var a = $("#userid").val();
                if ($("#username").val() != null && $("#username").val() != "" && $("#userPassword").val() != null && $("#userPassword").val() != "" && $("#userPhone").val() != null && $("#userPhone").val() != ""
                     && $("#userRealName").val() != null && $("#userRealName").val() != "") {
                    var bool = $("#fm").form("validate");

                    if (bool) {
                        var rows = $("#data").datagrid("getSelections");
                        var data;
                        //var storeIDs = pageConfig.storeIDs;
                        // alert(storeIDs); 
                        //?dictionaryCode= + pageConfig.storeIDs  
                        if (pageConfig.type == 1) {
                            url = pageConfig.saveAction;    ///'/Manager/Save2?dictionaryCode =' + pageConfig.storeIDs;// 
                            data = {
                                username: $("#username").val(),
                                userPhone: $("#userPhone").val(),
                                RealName: $("#userRealName").val(),
                                password: $("#userPassword").val(),
                               // storeIDs: $('#store').val(),//   pageConfig.storeIDs, 
                            };

                        }
                        else {
                            url = pageConfig.modifyAction;
                            data = {
                                userid: $("#userid").val(),
                                username: $("#username").val(),
                                userPhone: $("#userPhone").val(),
                                RealName: $("#userRealName").val(),
                                password: $("#userPassword").val(),

                            };
                        }
                        $.ajax({
                            url: url,
                            dataType: "json",
                            data: data,
                            type: "POST",
                            beforeSend: function () {
                                $.messager.progress({ title: "执行中", text: "" });
                            },
                            success: function (data) {
                                $.messager.alert("提示", data.msg, "info");
                            },
                            error: function (data) {
                                $.messager.alert("警告", data.msg, "error", "")
                            },
                            complete: function () {

                                complete();
                            }
                        });

                    }
                }
                else {
                    $.messager.alert("请填写完整信息", "请填写完整信息", "info");
                }
            }
        }
        function searchData() {
            $("#data").datagrid('load', {
                RealName: $("#txtName").val()

            });
        }

        function before() {
            $.messager.progress({ title: "执行中", text: "" });
        }

        function success(data) {
            $.messager.alert("成功", data.msg, "info");
        }
        function error() {

            $.messager.alert("警告", "系统故障", "error", "")
        }

        function complete() {
            $("#data").datagrid("load");
            $.messager.progress("close");
            $("#formdialog").dialog("close");
        }
    </script>
</head>
<body class="easyui-layout" style="width: 100%; height: 100%">
    <div data-options="region:'center'">
        <table id="data"></table>
        <div id="tool" style="padding: 10px;">
            <div style="margin-bottom: 10px;">
                <div style="margin-bottom: 10px;">
                    &nbsp&nbsp&nbsp &nbsp&nbsp&nbsp &nbsp&nbsp&nbsp &nbsp&nbsp&nbsp 
                    <a class="easyui-linkbutton" iconcls="icon-add"  style="width: 100px; height: 50px;" onclick="alertFormDialog(1)">添加人员</a> &nbsp&nbsp&nbsp &nbsp&nbsp&nbsp &nbsp&nbsp&nbsp &nbsp&nbsp&nbsp 
                    <a class="easyui-linkbutton" iconcls="icon-edit"  style="width: 100px; height: 50px;" onclick="alertFormDialog(2)">修改信息</a> &nbsp&nbsp&nbsp &nbsp&nbsp&nbsp &nbsp&nbsp&nbsp &nbsp&nbsp&nbsp 
                    <a class="easyui-linkbutton" iconcls="icon-remove"  style="width: 100px; height: 50px;" onclick="del()">禁用用户</a>
                     &nbsp&nbsp&nbsp &nbsp&nbsp&nbsp &nbsp&nbsp&nbsp &nbsp&nbsp&nbsp 
                真实姓名：<input id="txtName" type="text" style="width: 180px; height: 25px; margin-top: 15px" oninput="searchData()" />
                &nbsp&nbsp&nbsp &nbsp&nbsp&nbsp &nbsp&nbsp&nbsp &nbsp&nbsp&nbsp 
                <a class="easyui-linkbutton" iconcls="icon-search" onclick="searchData()">查询</a>
               <span style="font-size: larger; color: red">&nbsp&nbsp &nbsp&nbsp&nbsp   &nbsp&nbsp&nbsp &nbsp&nbsp&nbsp  </span>
                </div>
            </div>                                                                                                                                                                                                       
            @*<div style="margin-left: 10px;"> 注意:可点击"+"号查看该理货员管理的店铺信息
                &nbsp&nbsp&nbsp &nbsp&nbsp&nbsp &nbsp&nbsp&nbsp &nbsp&nbsp&nbsp 
                真实姓名：<input id="txtName" type="text" oninput="searchData()" />
                &nbsp&nbsp&nbsp &nbsp&nbsp&nbsp &nbsp&nbsp&nbsp &nbsp&nbsp&nbsp 
                <a class="easyui-linkbutton" iconcls="icon-search" onclick="searchData()">查询</a>
            </div>*@
        </div>
    </div>

    <div id="formdialog">
        @using (Ajax.BeginForm(new AjaxOptions
        {
            OnBegin = "before",
            OnComplete = "complete",
            OnSuccess = "success",
            OnFailure = "error",
            HttpMethod = "Post"
        }))
        {
            <div class="dialog-table">
                <form id="fm" method="post">

                    <table width="100%" border="0" cellspacing="0" cellpadding="0" class="tk_table">

                        <tr hidden="hidden">
                            <td>用户编号：</td>
                            <td class="white-tr">
                                <input class="easyui-validatebox" id="userid" data-options="required:true" /></td>
                        </tr>
                        <tr>
                            <td>用户名：</td>
                            <td class="white-tr">
                                <input class="easyui-validatebox" id="username" data-options="required:true" /></td>
                        </tr>
                        <tr>
                            <td>密码：</td>
                            <td class="white-tr">
                                <input class="easyui-validatebox" type="password" id="userPassword" data-options="required:true" /></td>
                        </tr>
                        <tr>
                            <td>手机号：</td>
                            <td class="white-tr">
                                <input class="easyui-validatebox" id="userPhone" data-options="required:true"   /></td>
                        </tr>
                        <tr>
                            <td>真实姓名：</td>
                            <td class="white-tr">
                                <input class="easyui-validatebox" id="userRealName" data-options="required:true" /></td>
                        </tr>
     @*                   <tr>
                            <td>管理店铺：</td>
                            <td>
                                <input id="store" class="easyui-combobox" name="store" data-options="multiple:true,panelHeight:'auto',required:true"   />
                            </td>
                        </tr>*@
                    </table>
                </form>
            </div>
        }
    </div>

    <div id="btns">
        <div style="margin-bottom: 10px">
            <a class="easyui-linkbutton" iconcls="icon-redo" onclick="closeDptDialog()">取消</a>
            <a class="easyui-linkbutton" iconcls="icon-add" onclick="save()">保存</a>
        </div>
    </div>

</body>
</html>
